<template>
    <div id="app">
    <!--搜索-->
    <el-row>
        <el-col :span="4"><el-input v-model="ename" size="mini" placeholder="请输入用户账号"></el-input></el-col>
<!--        <el-col :span="6"><el-input v-model="loc"  size="mini" placeholder="请输入"></el-input></el-col>-->
        <el-col :span="4">
            <el-select v-model="dept" size="mini" clearable placeholder="请选择所在部门">
                <el-option
                v-for="item in depts"
                :key="item.deptName"
                :label="item.deptName"
                :value="item.deptName">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="4">
            <el-select v-model="businessType" size="mini" clearable placeholder="请选择业务类型">
                <el-option label="新增" value="1"></el-option>
                <el-option label="修改" value="2"></el-option>
                <el-option label="删除" value="3"></el-option>
                <el-option label="其他" value="0"></el-option>
            </el-select>
        </el-col>
        <el-col :span="4"><el-button type="primary" @click="search"  size="mini" icon="el-icon-search">搜索</el-button>
         </el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
    </el-row>
    <!--分页列表显示-->
    <el-row>
        <el-table
                v-loading="loading2"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                :data="tableData"
                border
                height="460"
                width="100"
                :default-sort = "{prop: 'operTime', order: 'descending'}"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="operId"
                    label="日志编号"
                    width="60">
            </el-table-column>
             <el-table-column
                    prop="title"
                    label="模块标题"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="businessType"
                    label="业务类型"
                    width="80">
                    <template slot-scope="scope">
                        <p v-if="scope.row.businessType==1">新增</p>
                        <p v-if="scope.row.businessType==2">修改</p>
                        <p v-if="scope.row.businessType==3">删除</p>
                        <p v-if="scope.row.businessType==0 || scope.row.businessType==8">其他</p>
                    </template>
            </el-table-column>
            <el-table-column
                    prop="method"
                    label="方法名称">
            </el-table-column>
            <el-table-column
                    prop="operatorType"
                    label="操作类别"
                    width="80">
                    <template slot-scope="scope">
                        <p v-if="scope.row.operatorType==1">后台用户</p>
                        <p v-if="scope.row.operatorType==2">手机端用户</p>
                        <p v-if="scope.row.operatorType==0">其他</p>
                    </template>
            </el-table-column>
            <el-table-column
                    prop="operName"
                    label="操作人员"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="deptName"
                    label="部门名称"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="operUrl"
                    label="请求URL">
            </el-table-column>
            <el-table-column
                    prop="operIp"
                    label="主机地址"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="operLocation"
                    label="操作地点"
                    width="80">
            </el-table-column>

            <el-table-column
                    prop="operParam"
                    label="请求参数"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="操作状态"
                    width="80">
                    <template slot-scope="scope">
                        <p v-if="scope.row.operatorType==0">正常</p>
                        <p v-if="scope.row.operatorType==1">异常</p>
                    </template>
            </el-table-column>
            <el-table-column
                    prop="errorMsg"
                    label="错误消息"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="operTime"
                    label="操作时间"
                    sortable
                    fixed="right">
                    <template slot-scope="scope">
                    <el-date-picker
                        v-model="scope.row.operTime"
                        type="datetime"
                        disabled="true">
                    </el-date-picker>
                    </template>
            </el-table-column>

            <!-- <el-table-column
                    prop="status"
                    label="状态">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                         @change='changeStatus($event,scope.row.status,scope.row.userId)'
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="0"
                        inactive-value="1"
                        >
                    </el-switch>
                </template>
            </el-table-column> -->
        </el-table>
    </el-row>
    <!--分页插件-->
    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-row><br>
    <!--百分比-->
    <el-row>
        <el-tooltip class="item" effect="dark" content="符合条件的记录占比" placement="right-start">
            <el-progress type="circle" width="90" :percentage="maths" v-bind:title="符合条件的记录占比" show-text="true"></el-progress>
        </el-tooltip>
    </el-row>
   
  </div>
</template>
<script>
export default {
    data(){
        return {
            tableData:[],
            currentPage:1,//当前页面，默认1
            pageSize:2,//每页显示条数
            total:100,//分页总数量，默认值随便写，初始化时赋予新值
            ename:'',//查询功能
            dialogFormVisible:false,
            loading2:"true",  //加载提示
            maths:0,
            depts:[],
            dept:'',
            businessType:''
      }
    },
    created:function(){
            this.loading2 = "true";
            //初始化
            this.loadData();
            this.tableRowClassName;
            this.loadDept();
     },
      methods: {
          //计算百分比
            // mathWay(){
            //     var _this = this;
            //     axios.get('/emp/listCount')
            //         .then(function (response) {
            //             //正确请求时，回调函数
            //             console.log("========="+response);
            //             if(response.data.code==2000){
            //                 let max = response.data.data;
            //                 let min = _this.total;
            //                 _this.maths = min/max*100;
            //             }else{
            //                 console.log("==========");
            //             }
            //         })
            //         .catch(function (error) {
            //             //失败处理
            //             console.log(error);
            //             console.log("==========");
            //         });
            // },
            //加载部门下拉框数据
            loadDept(){
                var deptList=[];
                var _this = this;
                this.$http.post('/api/cs/dept/queryList')
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log("=========");
                        console.log(response);
                        if(response.data.code==2000){
                            deptList = response.data.data;
                            _this.depts = deptList;
                        }else{
                            console.log("==========");
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                        console.log("==========");
                    });
            },
            //加载日志数据
            loadData(){
                this.$http.post("/api/cs/operLog/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{
                                            operName:this.ename,
                                            businessType:this.businessType,
                                            deptName:this.dept
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.tableData = response.data.data.list;
                                                  this.total = response.data.data.total;
                                                  this.loading2 = "";
                                                  this.mathWay();
                                              }else{
                                                  //失败处理
                                                  console.log(error);
                                              }
                                })
            },
            //各种绑定事件方法
            //每页数量发生变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.loadData();
                /* axios.get('/dept/page',{
                     params: {
                         pageNo: this.currentPage,
                         pageSize: this.pageSize
                     }
                 })
                     .then(function (response) {
                         //正确请求时，回调函数
                         console.log(response);
                         if(response.data.code==2000){
                             _this.tableData = response.data.data.pageDept;
                             _this.total = response.data.data.total;
                         }
                     })
                     .catch(function (error) {
                         //失败处理
                         console.log(error);
                     });*/
            },
            //当前页发生变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.loadData();
                /*axios.get('/dept/page',{
                    params: {
                        pageNo: this.currentPage,
                        pageSize:this.pageSize
                    }
                })
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log(response);
                        if(response.data.code==2000){
                            _this.tableData = response.data.data.pageDept;
                            _this.total = response.data.data.total;
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                    });*/
            },
            //查询方法
            search(){
                this.loadData();
            },
           
      }

}
</script>
<style>
    /* #app {
            zoom: 0.89;
            -moz-transform: scale(1);
            -moz-transform-origin: 0 0;
        } */
</style>